<template>
	<view class="profile-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 自定义标题栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<text class="navbar-title">我的</text>
				<view class="navbar-right">
					<view class="settings-btn" @click="setting">
						<text class="settings-icon">⚙️</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<view class="avatar-section" @click="upload_avatar">
					<image 
						:src="baseInfo.avatar || defaultAvatar" 
						class="user-avatar"
						mode="aspectFill"
					/>
					<view class="avatar-badge">
						<text class="camera-icon">📷</text>
					</view>
				</view>
				
				<view class="user-details">
					<text class="user-name">{{ baseInfo.name || '未设置姓名' }}</text>
					<text class="user-account">账号：{{ baseInfo.phone || '未绑定' }}</text>
					<view class="auth-status">
						<view class="auth-badge verified">
							<text class="auth-text">已登录</text>
						</view>
		  </view>	
		  </view>
	  </view>
	  
			<!-- 统计信息 -->
			<view class="stats-section">
				<view class="stat-item">
					<text class="stat-number">{{ memoCount || 0 }}</text>
					<text class="stat-label">备忘录</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ favoriteCount || 0 }}</text>
					<text class="stat-label">收藏</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ registerDays || 0 }}</text>
					<text class="stat-label">使用天数</text>
				</view>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-section">
				<view class="menu-item" @click="profile">
					<view class="menu-icon personal">
						<text class="icon-text">👤</text>
					</view>
					<text class="menu-title">个人信息</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="account">
					<view class="menu-icon security">
						<text class="icon-text">🔒</text>
					</view>
					<text class="menu-title">账号与安全</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="dataManager">
					<view class="menu-icon data">
						<text class="icon-text">📊</text>
					</view>
					<text class="menu-title">数据管理</text>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<view class="menu-section">
				<view class="menu-item" @click="setting">
					<view class="menu-icon settings">
						<text class="icon-text">⚙️</text>
					</view>
					<text class="menu-title">设置</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="service_center">
					<view class="menu-icon service">
						<text class="icon-text">🎧</text>
					</view>
					<text class="menu-title">帮助与反馈</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="about">
					<view class="menu-icon about">
						<text class="icon-text">ℹ️</text>
					</view>
					<text class="menu-title">关于我们</text>
					<view class="version-info">
						<text class="version-text">v{{ version || '1.0.0' }}</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<!-- 登出按钮 -->
			<view class="menu-section">
				<view class="menu-item logout-item" @click="logout">
					<view class="menu-icon logout">
						<text class="icon-text">🚪</text>
					</view>
					<text class="menu-title logout-text">退出登录</text>
				</view>
			</view>
		</view>

		<!-- 头像选择弹窗 -->
		<view class="avatar-modal" v-if="showAvatarModal" @click="closeAvatarModal">
			<view class="avatar-modal-content" @click.stop>
				<view class="modal-title">选择头像</view>
				<view class="avatar-grid">
					<!-- 默认头像选项 -->
					<view 
						class="avatar-option" 
						@click="selectAvatar('/static/images/logo.png')"
					>
						<image 
							src="/static/images/logo.png" 
							mode="aspectFill"
							class="avatar-preview"
						></image>
						<view class="avatar-name">默认头像</view>
					</view>
					
					<!-- 本地相册选择选项 -->
					<view 
						class="avatar-option" 
						@click="selectAvatar('choose_local')"
					>
						<view class="avatar-preview local-choose-icon">
							<text class="icon">📷</text>
						</view>
						<view class="avatar-name">选择照片</view>
					</view>
				</view>
				<view class="modal-actions">
					<button class="btn-cancel" @click="closeAvatarModal">取消</button>
				</view>
			</view>
		</view>
		
		<!-- 隐藏的canvas用于头像处理 -->
		<canvas canvas-id="avatarCanvas" style="width: 200px; height: 200px; position: fixed; left: -9999px; top: -9999px;"></canvas>
  </view>
</template>

<script>
	import localStorage from '@/utils/storage.js'
  export default {
    data(){
      return {
		  
		  	  baseInfo: {
		  name:'',
		  phone:'',
		  avatar:'',
		  company_name:'',
		  registerDate:'',
		  login_code:'',
		  auth: 0,
	  },
	  version:"",
	  memoCount: 0,
	  favoriteCount: 0,
	  registerDays: 0,
	  showAvatarModal: false,
	  defaultAvatar: '/static/images/logo.png',
	  statusBarHeight: 0
      }
    },
	onLoad() {
		// 使用优化的状态栏高度获取方法
		this.getStatusBarHeight();
		
		// 暂时跳过登录检查，直接加载数据进行测试
		this.getUserInfo();
		this.getStats();
		// 设置应用版本号（从manifest.json获取）
		this.version = '1.0.0';
	}, 
	onShow() {
		// 暂时跳过登录检查，直接刷新数据进行测试
		this.getUserInfo();
		this.getStats();
	},
    methods:{
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			// 微信小程序需要特殊处理
			if (statusBarHeight === 0) {
				statusBarHeight = 25; // 微信小程序默认状态栏高度
			}
			// 确保最小高度，避免文字被遮挡
			statusBarHeight = Math.max(statusBarHeight, 22);
			console.log('微信小程序状态栏高度:', statusBarHeight);
			// #endif
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			// H5环境不需要状态栏
			statusBarHeight = 0;
			// #endif
			
			// #ifdef APP-PLUS
			// APP环境使用原始高度
			statusBarHeight = statusBarHeight || 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		checkLoginStatus() {
			// 检查登录状态
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return false;
			}
			return true;
		},
		
		getUserInfo(){
			// 使用本地存储获取用户信息
			const currentUser = localStorage.getCurrentUser();
			if (currentUser) {
				this.baseInfo = {
					name: currentUser.name,
					phone: currentUser.phone,
					avatar: currentUser.avatar,
					company_name: '',
					registerDate: currentUser.createTime,
					login_code: '',
					auth: currentUser.isAdmin ? 1 : 0,
				};
			}
		},
		
		getStats() {
			// 使用本地存储获取统计信息
			const result = localStorage.getStats();
			if (result.success) {
				this.memoCount = result.data.totalMemos;
				this.favoriteCount = result.data.favoriteCount;
				this.registerDays = result.data.registerDays;
			}
		},
		
		upload_avatar() {
			this.showAvatarModal = true;
		},
		
		closeAvatarModal() {
			this.showAvatarModal = false;
		},
		
		selectAvatar(avatarPath) {
			if (avatarPath === 'choose_local') {
				// 选择本地图片
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // 使用压缩图片节省空间
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 保存图片到永久目录
						this.saveImageToPermanent(tempFilePath);
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			} else {
				// 使用预设头像
				this.updateAvatar(avatarPath);
			}
			this.closeAvatarModal();
		},
		
		// 保存图片（简化版本）
		saveImageToPermanent(tempFilePath) {
			console.log('开始保存头像:', tempFilePath);
			
			// 对于本地应用，直接保存临时文件路径
			// 由于我们使用的是本地存储而不是网络请求，临时文件应该可以正常访问
			this.updateAvatar(tempFilePath);
		},
		

		
		updateAvatar(avatarPath) {
			console.log('更新头像路径:', avatarPath);
			// 更新头像
			const result = localStorage.updateUserInfo({ avatar: avatarPath });
			if (result.success) {
				this.baseInfo.avatar = avatarPath;
				console.log('头像更新成功');
				uni.showToast({
					title: '头像设置成功',
					icon: 'success',
					duration: 2000
				});
			} else {
				console.error('头像更新失败:', result.message);
				uni.showToast({
					title: result.message || '头像更新失败',
					icon: 'none',
					duration: 2000
				});
			}
		},
		
		profile(){
			console.log('点击个人资料');
			uni.navigateTo({
				url: '/pages/mySubpack/profile/index',
				fail: (error) => {
					console.error('跳转个人资料页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		account(){
			console.log('点击账号安全');
			uni.navigateTo({
				url: '/pages/mySubpack/security/index',
				fail: (error) => {
					console.error('跳转账号页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		dataManager(){
			console.log('点击数据管理');
			uni.navigateTo({
				url: '/pages/mySubpack/data/index',
				fail: (error) => {
					console.error('跳转数据管理页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		setting(){
			console.log('点击设置');
			uni.navigateTo({
				url: '/pages/mySubpack/settings/index',
				fail: (error) => {
					console.error('跳转设置页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		service_center(){
			console.log('点击帮助与反馈');
			uni.navigateTo({
				url: '/pages/mySubpack/about/feedback',
				fail: (error) => {
					console.error('跳转反馈页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		about(){
			console.log('点击关于我们');
			uni.navigateTo({
				url: '/pages/mySubpack/about/index',
				fail: (error) => {
					console.error('跳转关于页面失败:', error);
					uni.showToast({
						title: '页面加载失败',
						icon: 'error'
					});
				}
			});
		},
		
		logout(){
			uni.showModal({
				title: '确认退出',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						localStorage.logout();
						uni.reLaunch({
							url: '/pages/public/login'
						});
					}
				}
			});
		}
    }
  }
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background: #f8f9fa;
}

.status-bar {
	background: #6c5ce7;
}

.custom-navbar {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	/* #ifdef MP-WEIXIN */
	padding: 24rpx 30rpx 16rpx 30rpx;
	/* #endif */
	/* #ifdef APP-PLUS */
	padding: 20rpx 30rpx;
	/* #endif */
	/* #ifdef H5 */
	padding: 20rpx 30rpx;
	/* #endif */
}

.navbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}

.navbar-right {
	display: flex;
	align-items: center;
}

.settings-btn {
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.settings-icon {
	font-size: 28rpx;
}

.user-card {
	margin: 30rpx;
	background: white;
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.avatar-section {
	position: relative;
	margin-right: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid white;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.avatar-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40rpx;
	height: 40rpx;
	background: #a6c0fe;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3rpx solid white;
}

.camera-icon {
	font-size: 20rpx;
}

.user-details {
	flex: 1;
}

.user-name {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.user-account {
	display: block;
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.auth-status {
	display: flex;
}

.auth-badge {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	background: #f5f5f5;
	border: 1rpx solid #e0e0e0;
}

.auth-badge.verified {
	background: #e8f5e8;
	border-color: #4caf50;
}

.auth-text {
	font-size: 22rpx;
	color: #666;
}

.auth-badge.verified .auth-text {
	color: #4caf50;
}

.stats-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.stat-item {
	text-align: center;
	flex: 1;
}

.stat-number {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.stat-label {
	display: block;
	font-size: 24rpx;
	color: #666;
}

.stat-divider {
	width: 1rpx;
	height: 60rpx;
	background: #e0e0e0;
}

.menu-list {
	margin: 0 30rpx 40rpx;
}

.menu-section {
	background: white;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: all 0.3s ease;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: rgba(166, 192, 254, 0.1);
}

.menu-icon {
	width: 60rpx;
	height: 60rpx;
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.menu-icon.personal { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.menu-icon.security { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.menu-icon.data { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.menu-icon.settings { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.menu-icon.service { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.menu-icon.about { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.menu-icon.logout { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }

.icon-text {
	font-size: 28rpx;
	color: white;
}

.menu-title {
	flex: 1;
	font-size: 30rpx;
	color: #333;
}

.logout-text {
	color: #ff6b6b;
}

.version-info {
	margin-right: 20rpx;
}

.version-text {
	font-size: 24rpx;
	color: #999;
	background: #f5f5f5;
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
}

.menu-arrow {
	font-size: 32rpx;
	color: #ccc;
}

.logout-item {
	background: rgba(255, 107, 107, 0.1);
}

.avatar-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar-modal-content {
	background: white;
	border-radius: 20rpx;
	padding: 40rpx;
	margin: 0 60rpx;
	width: calc(100% - 120rpx);
	max-width: 600rpx;
}

.modal-title {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 40rpx;
	color: #333;
}

.avatar-grid {
	display: flex;
	gap: 30rpx;
	margin-bottom: 40rpx;
}

.avatar-option {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.avatar-preview {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	margin-bottom: 20rpx;
	border: 2rpx solid #e0e0e0;
}

.local-choose-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 2rpx dashed #a6c0fe;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(166, 192, 254, 0.1);
	margin-bottom: 20rpx;
}

.local-choose-icon .icon {
	font-size: 40rpx;
	color: #a6c0fe;
}

.avatar-name {
	font-size: 24rpx;
	color: #666;
	text-align: center;
}

.modal-actions {
	text-align: center;
}

.btn-cancel {
	background: #f5f5f5;
	color: #666;
	border: none;
	border-radius: 10rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
}
</style>
